import { createFileRoute } from '@tanstack/react-router'
import { useAuth } from '@/providers/auth-provider'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { useEffect, useRef } from 'react'
import { annotate } from 'rough-notation'

export const Route = createFileRoute('/')({
    component: Index,
})

function Index() {
    const { user } = useAuth()
    const textRef = useRef<HTMLSpanElement>(null)
    const titleRef = useRef<HTMLSpanElement>(null)
    
    useEffect(() => {
        let textTimer: NodeJS.Timeout | null = null
        let titleTimer: NodeJS.Timeout | null = null
        let textAnnotation: any = null
        let titleAnnotation: any = null
        
        // 为描述文本添加方框效果
        if (textRef.current) {
            textAnnotation = annotate(textRef.current, { 
                type: 'highlight',
                color: '#A2CBB9',
                strokeWidth: 2,
                animationDuration: 1000,
                padding: 8
            })
            
            // 延迟一点时间再显示动画效果
            textTimer = setTimeout(() => {
                textAnnotation.show()
            }, 500)
        }
        
        // 为标题添加红色方框效果
        if (titleRef.current) {
            titleAnnotation = annotate(titleRef.current, {
                type: 'box',
                color: '#ef4444',
                strokeWidth: 2,
                animationDuration: 1000,
                padding: 0
            })
            
            // 延迟一点时间再显示动画效果
            titleTimer = setTimeout(() => {
                titleAnnotation.show()
            }, 800)
        }
        
        // 清理函数
        return () => {
            if (textTimer) clearTimeout(textTimer)
            if (titleTimer) clearTimeout(titleTimer)
            if (textAnnotation) textAnnotation.hide()
            if (titleAnnotation) titleAnnotation.hide()
        }
    }, [])
    
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <h1 className="text-3xl font-bold">
                    <span ref={titleRef}>欢迎来到 BaoYuan 系统</span>
                </h1>
                <p className="text-muted-foreground">
                    <span ref={textRef}>这是一个现代化的前端应用，支持用户认证和资料管理。</span>
                </p>
            </div>
            
            {user ? (
                <Card>
                    <CardHeader>
                        <CardTitle>用户信息</CardTitle>
                        <CardDescription>当前登录用户的基本信息</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="flex items-center space-x-4">
                            <Avatar className="h-16 w-16">
                                <AvatarImage 
                                    src={user.avatar && user.avatar.trim() !== '' ? user.avatar : undefined} 
                                    alt={user.name} 
                                />
                                <AvatarFallback className="text-lg">
                                    {user.name?.slice(0, 1)?.toUpperCase() ?? 'U'}
                                </AvatarFallback>
                            </Avatar>
                            <div className="space-y-1">
                                <h3 className="font-semibold text-lg">{user.name}</h3>
                                <p className="text-sm text-muted-foreground">{user.phone}</p>
                                {user.email && (
                                    <p className="text-xs text-muted-foreground">{user.email}</p>
                                )}
                                <p className="text-xs text-muted-foreground">
                                    ID: {user.id} | 状态: {user.status === 0 ? '正常' : '禁用'}
                                </p>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            ) : (
                <Card>
                    <CardHeader>
                        <CardTitle>未登录</CardTitle>
                        <CardDescription>请点击右上角头像登录或注册账户</CardDescription>
                    </CardHeader>
                </Card>
            )}
            
            <div className="grid gap-4 md:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle>功能特性</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                        <ul className="list-disc list-inside space-y-1 text-sm">
                            <li>用户注册和登录</li>
                            <li>个人资料管理</li>
                            <li>主题切换（明/暗模式）</li>
                            <li>响应式设计</li>
                            <li>现代化UI组件</li>
                        </ul>
                    </CardContent>
                </Card>
                
                <Card>
                    <CardHeader>
                        <CardTitle>技术栈</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                        <ul className="list-disc list-inside space-y-1 text-sm">
                            <li>React 19 + TypeScript</li>
                            <li>Vite + SWC</li>
                            <li>TanStack Router</li>
                            <li>Tailwind CSS</li>
                            <li>Radix UI</li>
                        </ul>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}